<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/templates/template.xhtml">
	<ui:define name="content">
		<h:form id="carForm">

			<p:fieldset legend="AvailableCars">

				<p:dataGrid id="availableCars" var="car"
					value="#{tableBean.carsSmall}" columns="3">

					<p:column>

						<p:panel id="pnl" header="#{car.model}" style="text-align:center">
							<h:panelGrid columns="1" style="width:100%">
								<p:graphicImage value="/images/cars/#{car.manufacturer}.jpg" />
							</h:panelGrid>
						</p:panel>

						<p:draggable for="pnl" revert="true" handle=".ui-panel-titlebar"
							stack=".ui-panel" />

					</p:column>

				</p:dataGrid>

			</p:fieldset>

			<p:fieldset id="selectedCars" legend="Selected Cars"
				style="margin-top:20px">

				<p:outputPanel id="dropArea">

					<h:outputText value="!!!Drop here!!!"
						rendered="#{empty tableBean.droppedCars}" style="font-size:24px;" />

					<p:dataTable var="car" value="#{tableBean.droppedCars}"
						rendered="#{not empty tableBean.droppedCars}">

						<p:column headerText="Model">
							<h:outputText value="#{car.model}" />
						</p:column>

						<p:column headerText="Year">
							<h:outputText value="#{car.year}" />
						</p:column>

						<p:column headerText="Manufacturer">
							<h:outputText value="#{car.manufacturer}" />
						</p:column>

						<p:column headerText="Color">
							<h:outputText value="#{car.color}" />
						</p:column>

					</p:dataTable>

				</p:outputPanel>

			</p:fieldset>

			<p:droppable for="selectedCars" tolerance="touch"
				activeStyleClass="ui-state-highlight" datasource="availableCars"
				onDrop="handleDrop">
				<p:ajax listener="#{tableBean.onCarDrop}"
					update="dropArea availableCars" />
			</p:droppable>

			<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
				draggable="false" width="200" showEffect="fade" hideEffect="fade"
				modal="true">

				<h:panelGrid id="display" columns="2" cellpadding="4">

					
				</h:panelGrid>
			</p:dialog>

		</h:form>

	</ui:define>
</ui:composition>
